<div data-bind="with:questionVO">
	<div id="question" style="background-color: #FFEDD5; margin-left: 10px;">
		<div style="margin-left: -24px;"><img src="/ce-static-testedge/common/images/questionPreviewStem.jpg" />
		</div>

		<div style="float: left;"><img src="/ce-static-testedge/common/images/questionPreviewIcon.jpg" />
		</div>
		<div data-bind="html: questiontext, click:function(data, event) { $root.openMainCkEditor('2', data, event) }" id="myDiv" style="max-height: 120px; height: 120px !important; overflow-y:scroll; overflow-x:hidden; max-width: 680px !important;" placeholder="Type here.." ></div>
		<!-- <a style="right: 14px;top: 18px" href="#" class="te-button buttonGray floatright" id="edit" datas-bind="click:function(data, event) { openMainCkEditor('2', data, event) }">Edit</a> -->

	</div>
	<br/>
	<div id="instruction" style="margin-left: 10px; " >

		<div style="margin-left: -23px;"><img src="/ce-static-testedge/common/images/questionPreviewInformation.jpg" />
		</div>
		<div data-bind="text: instruction"></div>
		<input type="text" data-bind="value:instruction" style="width: 90%; height: 30px" >
		<div class="clearBoth"></div>
		<div class="marginBottom">
			<div style="margin-left: -25px;"><img src="/ce-static-testedge/common/images/questionPreviewAnswerStem.jpg" />
			</div>
			<span> <b>Please select one choice as the correct answer, by clicking on the radio button next to it. </b></span>
		</div>

	</div>
	<div class="marginBottom" >
		<!-- qType :: <div data-bind="text: TemplateType"></div> -->
		<!-- ko if: TemplateType() == TEMPLATE_TYPE_MULTIPLECHOICE -->
		<ul id="optionId" data-bind="foreach: choiceTextArr">
			<li data-bind="css:$parent.optionsLayoutClassName">
				<!-- TEMPLATE_TYPE_MULTIPLECHOICE -->
				<input data-bind="uniqueId: id, checked: correctStatus"  class="css-checkbox" type="checkbox" />
				<!-- <label data-bind="uniqueFor: id, text :correctStatus" class="css-label"></label>  -->
				<div id="myDiv"	class="layoutInnerDiv" data-bind="html: choiceText, click:function(data, event) { $root.openMainCkEditor('5', data, event) }"  >
			</li>

		</ul>
		<!-- /ko -->
		<!-- ko ifnot: TemplateType() == TEMPLATE_TYPE_MULTIPLECHOICE -->
		<ul id="optionId" data-bind="foreach: choiceTextArr">
			<li data-bind="css:$parent.optionsLayoutClassName">
				<div>
					<!-- TEMPLATE_TYPE_TRUEFALSE or TEMPLATE_TYPE_SINGLECHOICE  -->
					<input type="radio" name="items" data-bind="attr: { value: id }, checked: $parent.selectedRadioID" class="floatleft marginRight marginTop5"/>
					<div id="myDiv"	class="layoutInnerDiv" data-bind="html: choiceText, click:function(data, event) { $root.openMainCkEditor('5', data, event) }"  >

					</div>
					<!-- <a href="#" class="te-button buttonGray floatleft" id="edit" datas-bind="css:$parent.currentLayoutBtnCSS, click:function(data, event) { $parent.openMainCkEditor('5', data, event, $index()) }">Edit</a> -->
				</div>
			</li>

		</ul>
		<!-- /ko -->
	</div>
	<div class="clearBoth"></div>
	<div class="bottomButton" style="bottom: 0px; width: 900px">
		<a href="#" class="te-button buttonBlue floatleft" data-bind="click: $root.saveQuestion">Save</a>
		<a href="#" class="te-button buttonGray floatleft" id="preview">Preview</a>
		<a href="#" class="te-button buttonGray floatleft" data-bind="click: $root.closeMCQSSCreateDialog">Cancel</a>
		<div style="float: right">
			<!-- <div data-bind="text: $parent"></div> -->
			<label>Select Layout</label>&nbsp;&nbsp; <select class="select width120" data-bind="options: layoutTypeArray, optionsText: 'layoutName', optionsValue: 'layoutID', value: layout, event: {change: onLayoutTypeChange}"></select>
		</div>
		<div class="clearBoth"></div>
	</div>
</div>
